<template>
  <a-modal
    :maskClosable="false"
    :title="title"
    centered
    width="75vw"
    :bodyStyle="{
      padding: '0 24px',
    }"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-card
      :bordered="false"
      :bodyStyle="{
        padding: '20px 24px 10px',
      }"
      style="width: 100%; height: 80vh; overflow-y: auto;"
    >
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="单据编号">
                <j-input placeholder="请输入单据编号" v-model="queryParam.purchaseBill"></j-input>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item
              label="项目名称"
              :wrapperCol="{
                xs: { span: 24 },
                sm: { span: 12 },
              }">
              <select-project-input style="width: 100%" v-model="queryParam.projectId" placeholder="请选择项目名称"/>
            </a-form-item>
          </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item
                label="申请人"
                :wrapperCol="{
                  xs: { span: 24 },
                  sm: { span: 12 },
                }">
              <select-user-by-dep
                placeholder="请选择申请人"
                :disabled="isVoid"
                v-model="queryParam.employeeId"
                />
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-button @click="searchByquery" type="primary" icon="search">查询</a-button>
              <a-button @click="searchReset(1)" style="margin-left: 8px" icon="redo">重置</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <a-table
        ref="table"
        rowKey="id"
        bordered
        :scroll="{x:scrollX}"
        :columns="dragResizeColumns"
        :components="draggableComponent"
        :dataSource="dataSource"
        :loading="loading"
        :pagination="ipagination"
        :rowSelection="{
          selectedRowKeys: selectedRowKeys,
          onSelectAll: onSelectAll,
          onSelect: onSelectOne,
          onChange: onSelectChange,
          type: getType,
        }"
        @change="handleTableChange"
        class="j-table-force-nowrap"
        wrapClassName="ant-modal-cust-warp"
      >
        <span slot="action" slot-scope="text, record">
          <a-button
            type="link"
            @click="handleDetail(record)"
          >详情</a-button>
        </span>
        <a slot="purchaseBill" slot-scope="text, record" @click="handleDetail(record)">
          {{text}}
        </a>
      </a-table>
    </a-card>
    <SelectPurchaseCalibrationOpinionDetailModal ref="detailForm"></SelectPurchaseCalibrationOpinionDetailModal>
  </a-modal>
</template>

<script>
import { filterObj } from '@/utils/util'
import { queryDepartTreeList, searchByKeywords } from '@/api/api'
import { getAction } from '@/api/manage'
import { filterMultiDictText,initDictOptions } from '@comp/dict/JDictSelectUtil';
import { DragResizable } from '@/mixins/DragResizable'
import SelectUserByDep from '@/views/scy/components/SelectUserByDep'
import SelectTeamInput from '@/views/scy/components/SelectTeamInput'
import SelectPurchaseCalibrationOpinionDetailModal from './SelectPurchaseCalibrationOpinionDetailModal'
import { mapGetters } from 'vuex'
import SelectProjectInput from '@/views/scy/components/SelectProjectInput'
export default {
  name: 'SelectProjectInputModal',
  components: {
    SelectUserByDep,
    SelectTeamInput,
    SelectPurchaseCalibrationOpinionDetailModal,
    SelectProjectInput
  },
  mixins: [DragResizable],
  props: ['multi','urlList', 'teamId', 'isTeamDisabled', 'invitationId', 'isVoid'],
  data() {
    return {
      title: '选择定标意见申请表单',
      queryParam: {
        order: 'desc',
        column: 'createTime'
      },
      dragResizeColumns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
          customCell: (record, index) => {
            let that = this
            return {
              on: {
                click: () => {
                  that.selectedRowKeys = []
                  that.selectedRowKeys.push(record.id)
                  that.choseObj = []
                  that.choseObj.push(record)
                }
              }
            }
          }
        },
        {
          title: '单据编号',
          align: 'center',
          dataIndex: 'purchaseBill',
          width:200,
          ellipsis: true,
          scopedSlots: { customRender: 'purchaseBill' },
          customCell: (record, index) => {
            let that = this
            return {
              on: {
                click: () => {
                  that.selectedRowKeys = []
                  that.selectedRowKeys.push(record.id)
                  that.choseObj = []
                  that.choseObj.push(record)
                }
              }
            }
          }
        },
        {
          title: '申请人',
          align: 'center',
          dataIndex: 'employeeId_dictText',
          width:100,
          ellipsis: true,
          scopedSlots: { customRender: 'employeeId_dictText' },
          customCell: (record, index) => {
            let that = this
            return {
              on: {
                click: () => {
                  that.selectedRowKeys = []
                  that.selectedRowKeys.push(record.id)
                  that.choseObj = []
                  that.choseObj.push(record)
                }
              }
            }
          }
        },
        {
          title: '申请部门',
          align: 'center',
          dataIndex: 'departId_dictText',
          width:200,
          ellipsis: true,
          scopedSlots: { customRender: 'departId_dictText' },
          customCell: (record, index) => {
            let that = this
            return {
              on: {
                click: () => {
                  that.selectedRowKeys = []
                  that.selectedRowKeys.push(record.id)
                  that.choseObj = []
                  that.choseObj.push(record)
                }
              }
            }
          }
        },
        {
            title:'项目名称',
            align:"center",
            width:250,
            ellipsis: true,
            dataIndex: 'projectId_dictText',
            scopedSlots: { customRender: 'projectId_dictText' },
            customCell: (record, index) => {
              let that = this
              return {
                on: {
                  click: () => {
                    that.selectedRowKeys = []
                    that.selectedRowKeys.push(record.id)
                    that.choseObj = []
                    that.choseObj.push(record)
                  }
                }
              }
            }
          },
          {
            title:'采购大类',
            align:"center",
            width:150,
            ellipsis: true,
            dataIndex: 'provisionBroad_dictText',
            scopedSlots: { customRender: 'provisionBroad_dictText' },
            customCell: (record, index) => {
              let that = this
              return {
                on: {
                  click: () => {
                    that.selectedRowKeys = []
                    that.selectedRowKeys.push(record.id)
                    that.choseObj = []
                    that.choseObj.push(record)
                  }
                }
              }
            }
          },
          {
            title:'业务板块',
            align:"center",
            width:150,
            ellipsis: true,
            dataIndex: 'businessSegment_dictText',
            scopedSlots: { customRender: 'businessSegment_dictText' },
            customCell: (record, index) => {
              let that = this
              return {
                on: {
                  click: () => {
                    that.selectedRowKeys = []
                    that.selectedRowKeys.push(record.id)
                    that.choseObj = []
                    that.choseObj.push(record)
                  }
                }
              }
            }
          },
          {
            title:'中标供应商',
            align:"center",
            width:250,
            ellipsis: true,
            dataIndex: 'biddingUnit_dictText',
            scopedSlots: { customRender: 'biddingUnit_dictText' },
            customCell: (record, index) => {
              let that = this
              return {
                on: {
                  click: () => {
                    that.selectedRowKeys = []
                    that.selectedRowKeys.push(record.id)
                    that.choseObj = []
                    that.choseObj.push(record)
                  }
                }
              }
            }
          },
          {
            title:'中标总金额(元)',
            align:"center",
            width:150,
            ellipsis: true,
            dataIndex: 'bidding',
            scopedSlots: { customRender: 'bidding' },
            customCell: (record, index) => {
              let that = this
              return {
                on: {
                  click: () => {
                    that.selectedRowKeys = []
                    that.selectedRowKeys.push(record.id)
                    that.choseObj = []
                    that.choseObj.push(record)
                  }
                }
              }
            }
          },
          {
            title:'审核状态',
            align:"center",
            width:100,
            ellipsis: true,
            dataIndex: 'bpmStatus_dictText',
            scopedSlots: { customRender: 'bpmStatus_dictText' },
            customCell: (record, index) => {
              let that = this
              return {
                on: {
                  click: () => {
                    that.selectedRowKeys = []
                    that.selectedRowKeys.push(record.id)
                    that.choseObj = []
                    that.choseObj.push(record)
                  }
                }
              }
            }
          },
          {
            title:'单据状态',
            align:"center",
            width:100,
            ellipsis: true,
            dataIndex: 'billStatus_dictText',
            scopedSlots: { customRender: 'billStatus_dictText' },
            customCell: (record, index) => {
              let that = this
              return {
                on: {
                  click: () => {
                    that.selectedRowKeys = []
                    that.selectedRowKeys.push(record.id)
                    that.choseObj = []
                    that.choseObj.push(record)
                  }
                }
              }
            }
          },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          fixed:"right",
          width: 147,
          scopedSlots: {
          filterDropdown: 'filterDropdown',
          filterIcon: 'filterIcon',
          customRender: 'action' }
        }
      ],
      dataSource: [],
      choseObj: [],
      departTree: [],
      selectedKeys: [],
      iExpandedKeys: [],
      loading: false,
      treeData: [],
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '50', '100', '200'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      url: {
        queryById: '/api/erp/purchase/procurement/erpPurchaseCalibrationOpinion/queryById',
        urlList: '/api/erp/purchase/procurement/erpPurchaseCalibrationOpinion/listOnlyForPop',
      },
      selectedRowKeys: [],
      selectionRows: [],
      visible: false,
      dictOptions: {},
      calibrationTime: [],
    }
  },
  created() {
    this.loadData()
    // 该方法触发屏幕自适应
    this.resetScreenSize()
    this.refresh()
    this.initDictConfig()
    this.initSource()
    this.dragResizeColumnswidth = this.dragResizeColumns.map(val => {
      return val.width
    })
  },
  computed: {
    // 计算属性的 getter
    getType: function () {
      return this.multi == true ? 'checkbox' : 'radio'
    },
  },
  watch:{
      'invitationId'(val){
        if (!!val) {
          this.queryParam.invitationId = this.invitationId;
          this.loadData()
        }
      }
    },
  methods: {
    ...mapGetters(['userInfo']),
    initDictConfig() {
      //关联项目
      initDictOptions('erp_omc_project,project_name,id').then((res) => {
        if (res.success) {
          this.$set(this.dictOptions, 'projectId', res.result)
        }
      })
      //审核状态
      initDictOptions('bpm_status').then((res) => {
        if (res.success) {
          this.$set(this.dictOptions, 'bpmStatus', res.result)
        }
      })
    },
    calibrationTimeChange(date, dateString) {
      this.$set(this.queryParam, 'calibrationStartTime', dateString[0] + ' 00:00:00')
      this.$set(this.queryParam, 'calibrationEndTime', dateString[1] + ' 23:59:59')
    },
    handleDetail (record) {
      this.$refs.detailForm.visible = true
      this.$nextTick(() => {
        this.$refs.detailForm.edit(record)
      })
    },
    add(selectObj, ids) {
      this.visible = true
      this.edit(selectObj, ids)
    },
    edit(selectObj, ids) {
      if (!ids) {
        this.selectedRowKeys = []
      } else {
        this.selectedRowKeys = ids
      }
      if (!selectObj) {
        this.selectionRows = []
      } else {
        this.selectionRows = selectObj
        this.choseObj = selectObj
      }
      if (ids == null && selectObj == null) {
        this.selectionRows = []
        this.choseObj = []
        this.selectedRowKeys = []
      }
    },
    loadData(arg) {
      // 加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1
      }
      // 团队名称
      if (!!this.teamId) {
        this.queryParam.teamId = this.teamId
      }
      // 招标采购申请
      if (!!this.invitationId) {
        this.queryParam.invitationId = this.invitationId
      }
      if (this.isVoid) {
        this.queryParam.employeeId = this.userInfo().empId
        this.queryParam.billStatus = '1'
      }
      var params = this.getQueryParams() // 查询条件
      let tmpUrl = this.urlList
      this.loading = true
      getAction(tmpUrl, params).then((res) => {
        if (res.success) {
          if (res.result == null) {
            this.dataSource = []
            this.ipagination.total = 0
            return
          }
          this.dataSource = res.result.records
          this.ipagination.total = res.result.total
          if (this.orgCode === '') {
            // 第一次打开
          } else {
            for (var i = 0; i < this.dataSource.length; i++) {
              for (var j = 0; j < this.choseObj.length; j++) {
                if (this.choseObj[j].id == this.dataSource[i].id) {
                  this.selectionRows.push(this.dataSource[i])
                  this.selectedRowKeys.push(this.dataSource[i].id)
                  break
                }
              }
            }
          }
          // 判断是否当前页没有数据且不为第一页
          if (this.dataSource.length == 0 && this.ipagination.current != 1) {
            this.ipagination.current = this.ipagination.current - 1
            this.loadData(this.ipagination.current - 1)
          }
        }
      }).finally(() => {
        this.loading = false
      })
    },
    loadTree() {
      var that = this
      that.treeData = []
      that.departTree = []
      queryDepartTreeList().then((res) => {
        if (res.success) {
          for (let i = 0; i < res.result.length; i++) {
            let temp = res.result[i]
            that.treeData.push(temp)
            that.departTree.push(temp)
            that.setThisExpandedKeys(temp)
          }
          this.loading = false
        }
      })
    },
    getQueryParams() {
      let param = Object.assign({}, this.queryParam)
      param.field = this.getQueryField()
      param.pageNo = this.ipagination.current
      param.pageSize = this.ipagination.pageSize
      return filterObj(param)
    },
    getQueryField() {
      let str = 'id,'
      for (let a = 0; a < this.dragResizeColumns.length; a++) {
        str += ',' + this.dragResizeColumns[a].dataIndex
      }
      return str
    },
    onSelectAll(selected, selectedRows, changeRows) {
      if (selected === true) {
        for (var a = 0; a < changeRows.length; a++) {
          this.choseObj.push(changeRows[a])
        }
      } else {
        for (var b = 0; b < changeRows.length; b++) {
          this.choseObj.splice(this.choseObj.indexOf(changeRows[b]), 1)
        }
      }
    },
    onSelectOne(record, selected) {
      if (selected === true) {
        if (this.multi) {
          // 多选
          this.choseObj.push(record)
        } else {
          // 单选
          this.choseObj = []
          this.choseObj.push(record)
        }
      } else {
        if (this.multi) {
          // 多选
          var index = -1
          for (var i = 0; i < this.choseObj.length; i++) {
            if (this.choseObj[i].id == record.id) {
              index = i
              break
            }
          }
          if (index >= 0) {
            this.choseObj.splice(index, 1)
          }
        } else {
          // 单选
          this.choseObj = []
        }
      }
    },
    initSource() {
      this.selectedRowKeys = []
      this.selectionRows = []
      this.choseObj = []
    },
    onSelectChange(selectedRowKeys, selectionRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectionRows = selectionRows
    },
    searchReset() {
      let that = this
      this.calibrationTime = []
      Object.keys(that.queryParam).forEach(function (key) {
        if (key === 'status') {
          if (that.disableStatus === '1' && !that.projectStatus) {
            that.queryParam[key] = null
          }
        } else if(!!that.signUnit && key == 'signUnit'){
          that.queryParam[key] = that.queryParam[key]
        } else if(!!that.teamId && key == 'teamName2'){
          that.queryParam[key] = that.queryParam[key]
        }else if(!!that.costType && key == 'costType'){
          that.queryParam[key] = that.queryParam[key]
        } else {
          that.queryParam[key] = null
        }
      })
      this.dataSource = []
      this.ipagination.total = 0
      that.loadData(1)
    },
    handleTableChange(pagination, filters, sorter) {
      // TODO 筛选
      // if (Object.keys(sorter).length > 0) {
      //   this.isorter.column = sorter.field
      //   this.isorter.order = sorter.order == 'ascend' ? 'asc' : 'desc'
      // }
      this.ipagination = pagination
      this.ipagination.current = pagination.current
      this.loadData()
    },
    handleCancel() {
      this.selectionRows = []
      this.selectedRowKeys = []
      this.visible = false
    },
    handleOk() {
      let data = {
        choseObj: this.choseObj,
        cutStatus: ''
      }
      this.$emit('choseObj', data)
      this.handleCancel()
    },
    searchByquery() {
      this.loadData(1)
    },
    handleToggleSearch() {
      this.toggleSearchStatus = !this.toggleSearchStatus
    },
    onSearch(value) {
      let that = this
      if (value) {
        searchByKeywords({ keyWord: value }).then((res) => {
          if (res.success) {
            that.departTree = []
            for (let i = 0; i < res.result.length; i++) {
              let temp = res.result[i]
              that.departTree.push(temp)
            }
          } else {
            that.$message.warning(res.message)
          }
        })
      } else {
        that.loadTree()
      }
    },
    setThisExpandedKeys(node) {
      if (node.children && node.children.length > 0) {
        this.iExpandedKeys.push(node.key)
        for (let a = 0; a < node.children.length; a++) {
          this.setThisExpandedKeys(node.children[a])
        }
      }
    },
    refresh() {
      this.loading = true
      this.loadTree()
    },
    onSelect(selectedKeys, e) {
      if (this.selectedKeys[0] !== selectedKeys[0]) {
        this.selectedKeys = [selectedKeys[0]]
      }
      let record = e.node.dataRef
      // this.selectionRows.push(record.id);
      this.onClearSelected()
      this.open(record)
    },
    onClearSelected() {
      this.selectedRowKeys = []
      this.selectionRows = []
    },
    open(record) {
      this.orgCode = record.orgCode
      this.loadData(1)
    },
    // 触发屏幕自适应
    resetScreenSize() {
      let screenWidth = document.body.clientWidth
      if (screenWidth < 500) {
        this.scrollTrigger = { x: 800 }
      } else {
        this.scrollTrigger = {}
      }
    },
    allObj() {
      this.selectedKeys = []
      this.onClearSelected()
      this.orgCode = null
      this.loadData(1)
    },
  }
}
</script>
<style scoped>
.ant-card-body .table-operator {
  margin-bottom: 18px;
}

.ant-table-tbody .ant-table-row td {
  padding-top: 15px;
  padding-bottom: 15px;
}

.anty-row-operator button {
  margin: 0 5px;
}

.ant-btn-danger {
  background-color: #ffffff;
}

.ant-modal-cust-warp {
  height: 100%;
}

.ant-modal-cust-warp .ant-modal-body {
  height: calc(100% - 110px) !important;
  overflow-y: auto;
}

.ant-modal-cust-warp .ant-modal-content {
  height: 90% !important;
  overflow-y: hidden;
}

.anty-img-wrap {
  height: 25px;
  position: relative;
}

.anty-img-wrap > img {
  max-height: 100%;
}
</style>
